본문으로 건너뛰기

memo

🧑🏻‍💻 memo​

memo를 사용하면 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있다.

✅ memo 문법​

const MemoizedComponent = memo(SomeComponent, arePropsEqual?)
  • SomeComponent는 메모화 하려는 컴포넌트이다. 함수와 forwardRef 컴포넌트를 포함한 모든 유효한 React 컴포넌트가 허용된다.
  • 선택적 arePropsEqual는 컴포넌트의 이전 prop 및 새로운 prop의 두 인자를 받는 함수이다. React는 기본적으로 [Object.is]로 각 prop을 비교하기 때문에 일반적으로 이 함수를 지정하지 않는다.
  • memo는 새로운 React 컴포넌트를 반환한다. memo는 기존 SomeComponent 수정하지 않고 새롭게 메모화된 SomeComponent를 반환한다.

🧑🏻‍💻 알고 가기​

✅ 언제 사용해야 하는가?​

  • prop이 변경되지 않았을 때
  • 대부분의 인터렉션이 세분화 되어 있을 때 (그림 그리기, 도형 이동)
  • 컴포넌트가 정확히 동일한 props로 자주 리렌더링 될 때
  • 리렌더링 로직이 비용이 많이 들 때

✅ 주의 사항​

  • memo로 최적화하는 것은 컴포넌트가 정확히 동일한 props로 자주 리렌더링되고, 리렌더링 로직이 비용이 많이 들 때만 가치가 있다.
  • 컴포넌트가 메모화 되었더라도 사용 중인 context가 변경되면 리렌더링된다.
  • 컴포넌트가 리렌더링되어도 인지할 수 있을 만큼의 지연이 없다면 memo가 필요하지 않는다.
  • 얕은 비교로 새로운 prop과 이전의 prop을 비교한다.
  • 모든 곳에 memo를 추가하면 코드 가독성이 떨어진다.

🧑🏻‍💻 활용 및 생각할 거리​

✅ Props가 객체일 때 memo 최대한 활용하기​

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});
  • useMemo를 사용하여 부모 컴포넌트가 해당 객체를 다시 만드는 것을 방지함으로써 props가 변경되는 시간을 최소화 할 수 있다.